.wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; opacity: .8; background: #50a3a2;
    background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
         background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
            background: linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
}
.wrapper.form-success .container h1 { -webkit-transform: translateY(85px); -ms-transform: translateY(85px); transform: translateY(85px); }
.container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 600px; height: 400px; margin: auto; text-align: center; color: #fff; }
.container h1 { font-size: 4rem; 
    -webkit-transition-timing-function: ease-in-put; 
            transition-timing-function: ease-in-put; 
    -webkit-transition-duration: 1s; 
            transition-duration: 1s;
}
form { position: relative; z-index: 2; padding: 20px 0; }
form > input { font-size: 18px; display: block; width: 250px; margin: 0 auto 10px auto; padding: 10px 15px; text-align: center; border: 1px solid rgba(255, 255, 255, .4); border-radius: 3px; outline: 0; background: rgba(255, 255, 255, .2);
    -webkit-transition-duration: .25s;
            transition-duration: .25s;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
form > input::-webkit-input-placeholder { color: #fff; }
form > input::-moz-placeholder          { color: #fff; }
form > input:-ms-input-placeholder      { color: #fff; }
form > input:hover { background: rgba(255, 255, 255, .4); }
form > input:focus { width: 300px; color: #53e3a6; background: #fff; }
form > button { font-size: 18px; width: 250px; padding: 10px 15px; cursor: pointer; color: #53e3a6; border: 0; border-radius: 3px; outline: 0; background: #fff;
    -webkit-transition-duration: .25s;
            transition-duration: .25s;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
form > button:hover { background: #f5f7f9; }
.bg-bubbles { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; }
.bg-bubbles > li { position: absolute; bottom: -160px; display: block; width: 40px; height: 40px; list-style: none; background: rgba(255, 255, 255, .15);
    -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
    -webkit-animation: square 25s infinite;
            animation: square 25s infinite;
}
.bg-bubbles > li:nth-child(1) { left: 10%; }
.bg-bubbles > li:nth-child(2) { left: 20%; width: 80px; height: 80px;
    -webkit-animation-duration: 17s;
            animation-duration: 17s;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}
.bg-bubbles > li:nth-child(3) { left: 25%;
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
}
.bg-bubbles > li:nth-child(4) { left: 40%; width: 60px; height: 60px; background: rgba(255, 255, 255, .25);
    -webkit-animation-duration: 22s;
            animation-duration: 22s;
}
.bg-bubbles > li:nth-child(5) { left: 70%; }
.bg-bubbles > li:nth-child(6) { left: 80%; width: 120px; height: 120px; background: rgba(255, 255, 255, .2);
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
}
.bg-bubbles > li:nth-child(7) { left: 32%; width: 160px; height: 160px;
    -webkit-animation-delay: 7s;
            animation-delay: 7s;
}
.bg-bubbles > li:nth-child(8) { left: 55%; width: 20px; height: 20px;
    -webkit-animation-duration: 40s;
            animation-duration: 40s;
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}
.bg-bubbles > li:nth-child(9) { left: 25%; width: 10px; height: 10px; background: rgba(255, 255, 255, .3);
    -webkit-animation-duration: 40s;
            animation-duration: 40s;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}
.bg-bubbles > li:nth-child(10) { left: 90%; width: 160px; height: 160px;
    -webkit-animation-delay: 11s;
            animation-delay: 11s;
}
@-webkit-keyframes square {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
                transform: translateY(-700px) rotate(600deg);
    }
}

@keyframes square {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-700px) rotate(600deg);
                transform: translateY(-700px) rotate(600deg);
    }
}
